<template>
  <view class="home flex column">
    <!-- 搜索框 -->
    <picker-item v-if="customerAuth" v-model="searchData.customerCode" changeValue="id" :options="nameList"
      @change="handleSelectChange" />
    <!-- 列表 -->
    <scroll-view :scroll-y="true" class="item one" refresher-enabled="true" :refresher-triggered="triggered"
      :refresher-threshold="50" refresher-background="#F5F5F5" @refresherrefresh="onRefresh"
      @refresherpulling="onPulling" @refresherrestore="onRestore" @refresherabort="onAbort"
      @scrolltolower="onScrollToLower">
      <template v-if="courseList && courseList.length">
        <view v-for="(item, index) in courseList" :key="index"
          class="u-p-t-20 u-p-l-20 u-p-r-20 u-flex-col u-col-center scroll-card">
          <u-card :border="false" box-shadow="0px 0px 8px #ddd6d6" :body-style="{ padding: '0 30rpx 10rpx' }"
            :head-style="{ padding: '10rpx 30rpx' }" margin="0rpx 32rpx 0" class="card" :head-border-bottom="false"
            @click="handleCourseClick(item, index)">
            <view slot="head">
              <view class="readTitle f-bold u-flex u-col-center u-row-center">
                <text>{{ item.customerShortName }}</text>
              </view>
            </view>
            <view slot="body">
              <view class="card-row u-p-b-10">
                <view class="u-flex">
                  <view class="u-font-24 t-red">{{ item.alarmTypeName }}</view>
                </view>
                <view class="card-row-title u-m-r-10">{{item.alarmType === '015' ? '预警内容:' : '报警内容:'}}</view>
                <view class="t-section">{{ item.cdLocation }} {{ item.alarmTypeName }}</view>
                <template v-if="item.alarmType === '015'">
                  <view class="t-section" v-if="item.cdValue || item.cdValue === 0">预警值：{{ item.cdValue }}{{
                    item.unitCode }}</view>
                </template>
                <template v-else>
                  <view class="t-section" v-if="item.maxValue || item.maxValue === 0">
                    最大值：{{ item.maxValue
                    }}{{ item.unitCode }}
                  </view>
                  <view class="t-section" v-if="item.maxTime">最大值时刻：{{ item.maxTime }}</view>
                </template>
              </view>
            </view>
          </u-card>
        </view>
        <view class="p-t-10 p-b-10">
          <u-loadmore :status="status" />
        </view>
      </template>
      <template v-if="showEmpty">
        <view class="c-empty p-absolute-center">
          <u-empty text="暂无数据"></u-empty>
        </view>
      </template>
    </scroll-view>
  </view>
</template>

<script>
import PickerItem from '../../components/pickerItem/pickerItem.vue'

export default {
  components: { PickerItem },
  props: {
    form: Object,
    nameList: Array,
    currentIndex: Number
  },
  data() {
    return {
      searchData: {
        alarmTypes: '',
        customerCode: '',
        startTime: '',
        endTime: '',
        sensorTypes: '',
      },
      triggered: false, // 下拉刷新
      showEmpty: false,
      status: 'nomore',
      courseList: [],
      customerAuth: false,
    }
  },
  watch: {
    form(res) {
      this.searchData = {
        ...this.searchData,
        alarmTypes: res.alarmType,
        sensorTypes: res.sensorType,
        startTime: this.$date(res.beginDate),
        endTime: this.$date(res.endDate)
      }

      this.showEmpty = false

      this.getData()
    },
    currentIndex(val) {
      this.getData()
    }
  },
  methods: {
    /**
     * 初始化
     */
    init() {
      // this.searchData.startTime = ''
      // this.searchData.endTime = ''
      // this.searchData.customerCode = ''
      this.showEmpty = false
    },
    /**
     * 请求数据
     */
    async getData() {
      const res = await this.$post('/realTime/alarm/getConfirmedAlarm', this.searchData)
      if (res && res.body && Array.isArray(res.body.confirmed)) {
        this.courseList = res.body.confirmed
        const sum = res.body.confirmed.length
        this.$emit('sumChange', sum)
        // 数据空
        if (this.courseList && this.courseList.length === 0) {
          this.showEmpty = true
        } else {
          this.showEmpty = false
        }
      }
    },
    /**
     * 查看
     */
    handleCourseClick(data) {
      if (data.alarmType === '015') {
        // go 预警详情
        uni.navigateTo({
          url: `./alarmItemDetail/index?data=${JSON.stringify(data)}`
        })
      } else {
        // go 报警详情
        uni.navigateTo({
          url: `./alarmConfirmDetail/alarmConfirmDetail?data=${JSON.stringify(data)}`
        })
      }
    },
    /**
     * select选中
     */
    handleSelectChange(val) {
      setTimeout(() => {
        this.getData()
      }, 300)
    },
    /**
     * 上拉加载
     */
    onScrollToLower() {
      if (this.status === 'loading') {
        this.getData()
      }
    },
    onPulling(e) {},
    onRefresh() {
      if (this.Isfreshing) return
      this.Isfreshing = true
      if (!this.triggered) {
        // 保证刷新状态下，triggered为true
        this.triggered = true
        this.init()
        this.getData()
        setTimeout(() => {
          this.triggered = false // 触发onRestore，关闭刷新图标
          this.Isfreshing = false
        }, 1200)
      }
    },
    onRestore() {},
    onAbort() {}
  },
  mounted() {
    // 获取账号权限
    this.customerAuth = getApp().globalData.userInfo.customerAuth

    this.init()
    this.getData()
  }
}
</script>

<style lang="scss" scoped>
.home {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;

  .navbar-right {
    margin-right: 40rpx;
    &--icon {
      width: 40rpx;
      height: 40rpx;
    }
  }
  .card {
    width: 100% !important;
  }
  .scroll-card {
    .title {
      color: #ff4229;
    }
    .readTitle {
      color: #2979ff;
    }
  }
}
</style>
